<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Tree Map Colors</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Tree Map Colors</p>
<hr class="separator">
<div class="content">
<img src="images/treemapcolors.png" width='600' height='520'>
<br><br>
This example demonstrates an alternative color scheme for multi-level tree maps.<br><br>
In the <a href="multileveltreemap.htm">Multi Level Tree Map</a> example, the colors are based on the first level nodes. This example demonstrates how to color based on second level nodes.
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/treemapcolors.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The first level nodes of the tree map. There are 3 nodes.
String[] allRegions = {"Alpha", "Beta", "Gamma"};

// Each first level node branches to become 7 second level nodes.
String[] energy_types = {"Coal", "Oil", "Gas", "Nuclear", "Hydro", "Solar", "Wind"};

// Colors for the second level nodes.
int[] colors = {0x222222, 0x666666, 0x884488, 0xcc0000, 0x3366cc, 0x33cc33, 0x77bbff};

// The data for the 3 groups of second level nodes
double[] region0 = {0, 50, 70, 0, 60, 120, 140};
double[] region1 = {200, 50, 30, 65, 60, 40, 40};
double[] region2 = {0, 100, 70, 100, 60, 35, 40};

// Create a Tree Map object of size 600 x 520 pixels
TreeMapChart c = new TreeMapChart(600, 520);

// Add a title to the chart
c.addTitle("Energy Usage by Region", "Arial Bold Italic", 18);

// Set the plotarea at (10, 35) and of size 480 x 480 pixels
c.setPlotArea(10, 35, 480, 480);

// Obtain the root of the tree map, which is the entire plot area
TreeMapNode root = c.getRootNode();

// Add first level nodes to the root. We do not need to provide data as they will be computed as the
// sum of the second level nodes.
root.setData(null, allRegions);

// Add second level nodes to each of the first level node
root.getNode(0).setData(region0, energy_types, colors);
root.getNode(1).setData(region1, energy_types, colors);
root.getNode(2).setData(region2, energy_types, colors);

// Get the prototype (template) for the first level nodes.
TreeMapNode nodeConfig = c.getLevelPrototype(1);

// Set the label format for the nodes to show the label with 8pt Arial Bold font in semi-transparent
// black color (0x77000000). Put the text at the top left corner of the cell.
nodeConfig.setLabelFormat("{label}", "Arial Bold", 18, 0x77ffffff, Chart.TopLeft);

// Set the border color to white (ffffff). Use 2 pixel thick flat border style.
nodeConfig.setColors(-1, 0xffffff, Chart.flatBorder(2));

// Get the prototype (template) for the second level nodes.
TreeMapNode nodeConfig2 = c.getLevelPrototype(2);

// Set the label format for the nodes to show the label and value with 8pt Arial Bold font. Put the
// text at the center of the cell.
nodeConfig2.setLabelFormat("{label}&lt;*br*&gt;{value}MW", "Arial Bold", 8, 0xffffff, Chart.Center);

// Set the border color to white (ffffff)
nodeConfig2.setColors(-1, 0xffffff);

// Add a legend box at (500, 35) with 12pt Arial font and transparent background and border.
LegendBox b = c.addLegend(500, 35, true, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);

// Add the legend keys for the colors
for(int i = 0; i &lt; energy_types.length; ++i) {
    b.addKey(energy_types[i], colors[i]);
}

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='&lt;*cdml*&gt;[{parent.label}] {label}: {value}MW'"))
    ;
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Tree Map Colors&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Tree Map Colors
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
